<template>
<!-- vue3组件中的模板结构可以没有根标签div -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>性别：{{person.sex}}</h2>
  <h3>工作种类：{{person.job.type}}</h3>
  <h3>工作薪资：{{person.job.salary}}</h3>
  <h3>爱好：{{person.hobby}}</h3>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="addSex">添加sex</button>
  <button @click="deleteName">删除Name</button>
</template>

<script>
import {reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    // Data
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          type:"web开发",
        salary:"30k"
        },
        hobby:['吸烟','喝酒','打牌']
      })
      // eslint-disable-next-line no-unused-vars
    // 方法
      function changeInfo(){
        person.name = '李四'
        person.age = 48
        person.job.type = "JAVA"
      }
      function addSex(){
        person.sex = '女'
      }
      function deleteName(){
       delete person.name 
        
      }
      return {
        person,
        changeInfo,
        addSex,
        deleteName
      }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
